import React, { Component } from 'react';
import { Table, Image } from 'antd';
import { getSongs } from '../../api/songs'
import { getM3pId } from '../../api/videoMp3Id'
import { withRouter } from 'react-router-dom';
import './songs.less';

class index extends Component {

  constructor() {
    super()
    this.state = {
      // tab-bar 列表
      tabList: [{ name: '全部', type: 0 }, { name: '华语', type: 7 }, { name: '欧美', type: 96 }, { name: '日本', type: 8 }, { name: '韩国', type: 16 }],
      // table 表格用到的数据
      data: []
    }
  }

  componentDidMount() {
    this.getTableData()
  }

  getTableData = async (type = 0) => {
    const { data } = await getSongs(type)
    let date = []
    let i = 0
    data.data.forEach(val => {
      date.push({
        key: i++,
        IdIndex: i,
        name: val.name,
        playcolumn: {
          url: val.album.picUrl,
          id: val.id
        },
        mp3Url: val.mp3Url,
        album: val.album.name,
        artists: val.artists[0].name,
        picUrl: val.album.picUrl,
        publishTime: val.album.publishTime
      })
    });
    // console.log(date)
    this.setState({
      data: date
    })
  }

  getmp3Id = async (id) => {
    const { data } = await getM3pId(id)
    // console.log(data.data[0].url)
    let url = data.data[0].url
    this.props.mp3Id(url)
  }

  render() {
    return (
      <div className="songs-container">
        <div className="tab-bar">
          <div className="items">
            {
              this.state.tabList.map((value) => {
                return <span className="item" onClick={() => { this.getTableData(value.type) }} key={value.type}>{value.name}</span>
              })
            }
          </div>
        </div>
        <Table columns={[
          // id 列
          {
            title: '',
            key: 'IdIndex',
            dataIndex: 'IdIndex'
          },
          // 播放列
          {
            title: '',
            dataIndex: 'playcolumn',
            key: 'playcolumn',
            render: text => <div className="img-warp" onClick={() => { this.getmp3Id(text.id) }}><Image preview={false} src={text.url} className="playcolumn-img" /><span></span> </div>,
          },
          // 音乐标题
          {
            title: '音乐标题',
            key: 'name',
            dataIndex: 'name',
            align: 'center'
          },
          // 歌手
          {
            title: '歌手',
            key: 'artists',
            dataIndex: 'artists'
          },
          // 专辑
          {
            title: '专辑',
            key: 'album',
            dataIndex: 'album'
          },
          // 时长
          {
            title: '时长',
            key: 'publishTime',
            dataIndex: 'publishTime'
          }
        ]} dataSource={this.state.data} pagination={false} />
      </div>
    )
  }
}

export default withRouter(index)